<template>
    <div>
      <!--轮播图区域-->
      <mt-swipe :auto="4000">
        <mt-swipe-item><img src="../../images/1.jpg" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../../images/2.jpg" alt=""></mt-swipe-item>
        <mt-swipe-item><img src="../../images/3.jpg" alt=""></mt-swipe-item>
      </mt-swipe>
      <!--9公格到6公格的改造-->
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
          <img src="../../images/1.jpg" alt="">
          <div class="mui-media-body">新闻资讯</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
          <img src="../../images/1.jpg" alt="">
          <div class="mui-media-body">图片分享</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
          <img src="../../images/1.jpg" alt="">
          <div class="mui-media-body">商品购买</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
          <img src="../../images/1.jpg" alt="">
          <div class="mui-media-body">留言反馈</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
          <img src="../../images/1.jpg" alt="">
          <div class="mui-media-body">视频专区</div></router-link></li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist">
          <img src="../../images/1.jpg" alt="">
          <div class="mui-media-body">联系我们</div></router-link></li>
      </ul>
      <h3>HomeContainer</h3>
    </div>
</template>

<script>
    export default {
      data() {
        return {
          lunbotu: []
        }
      },
      // created(){
      //   this.getLunbotu();
      // },
      // methods: {
      //   getLunbotu(){
      //     this.$http.get('http://115.28.2.132:9876/news_list').then(result=>{
      //       if(result.body.status === "success"){
      //         this.lunbotu = result.body.message;
      //         console.log(result.body)
      //       }else{
      //         Toast('获取新闻列表失败')
      //       }
      //     })
      //   }
      // }
    }
</script>

<style scoped>
    .mint-swipe {
      height: 200px;
    }
    .mint-swipe-item:nth-child(1) {
      background-color: red;
    }
    .mint-swipe-item:nth-child(2) {
      background-color: blue;
    }
    .mint-swipe-item:nth-child(3) {
      background-color: gray;
    }
    .mui-grid-view.mui-grid-9 {
      background-color: #fff;
      border: 0;
      font-size: 13px;
    }
    .mui-grid-view.mui-grid-9 img {
      width: 60px;
    }
    .mui-col-sm-3 {
      width: 32%;
    }
    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
      border: 0;
    }
    .mint-swipe-item img {
      width: 414px;
      height: 200px;
    }
</style>
